<!--
 * @Author: 星孑
 * @Date: 2022-03-19 15:56:50
 * @LastEditors: 星孑
 * @LastEditTime: 2022-04-08 20:12:26
 * @FilePath: /admin/src/views/User/menu.vue
 * @Description:
-->
<template>
  <div v-loading="loading" class="flex h-100">
    <div class="menu-tree h-100">
      <x-tree :menus="menus" :get-menus="getMenus" :current-node-change="currentNodeChange" />
    </div>
    <div class="btns-list flex-1 h-100">
      <x-buttons ref="buttons" />
    </div>
  </div>
</template>
<script>
import * as api from '../../api/user'
import { cloneDeep } from 'lodash'
import xTree from './components/tree.vue'
import xButtons from './components/buttons.vue'

export default {
  components: { xTree, xButtons },
  data() {
    return {
      loading: false,
      menuForm: {},
      menus: [
        {
          permissionId: '0',
          name: '管理后台',
          child: []
        }
      ],
      cloneMenus: []
    }
  },
  created() {
    this.getMenus()
  },
  methods: {
    getMenus() {
      // this.loading = true
      api.getMenus().then((res) => {
        const data = res.filter(item => item.hidden === 0)
        this.cloneMenus = cloneDeep(data)
        const menus = this.filterMenus(data)
        this.$set(this.menus[0], 'child', menus)
        this.loading = false
      })
    },
    filterMenus(data) {
      const arr = []
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        if (item.type === 0) {
          if (item.child && item.child.length > 0) {
            item.child = this.filterMenus(item.child)
          }

          arr.push(item)
        }
      }
      return arr
    },
    currentNodeChange(data, node) {
      this.$refs.buttons.changeNode(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.menu-tree {
  width: 440px;
  padding-right: 20px;
}

.btns-list {
  border: 1px solid #ddd;
  padding-left: 20px;
  padding-right: 20px;
}
</style>
